<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的全局注册</title>
</head>
<body>
<div id="app">
    <model1></model1>
    <model1></model1>
    <model1></model1>
</div>
<hr/>
<div id="app1">
    <model1></model1>
    <model1></model1>
    <model1></model1>
</div>

</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    //通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。-->
   // model1 组件的名字,在使用的地方可以通过这个名字来引用-->
    Vue.component("model1",{
        //模板, 也就是引用组件后显示什么内容
        template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",

        data:function (){
            return{
                title:"hello vue"
            }
        },
        methods:{
            btnfn:function (){
                alert("hello!!")
            }
        }
    });
    new Vue({
        el:'#app'
    })
    new Vue({
        el:'#app1'
    })
</script>


</html>